<template>
  <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
  <div class="app-container main flex-box c-c-c">
    <el-row :gutter="20" class="search_box">
      <el-col>
        <el-form
          ref="queryForm"
          :model="searchData"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item prop="name">
            <el-input
              v-model.trim="searchData.label"
              placeholder="请输入要查询的字典标题"
              clearable
              @keyup.enter.native="GetList"
              @clear="GetList"
            />
          </el-form-item>
          <el-form-item>
            <!-- icon="el-icon-search" -->
            <el-button type="primary" @click="GetList">搜索</el-button>
            <!-- icon="el-icon-refresh" -->
            <el-button @click="ReData">重置 </el-button>
          </el-form-item>
          <!--  v-permission="['PRIV_TITTLE_CREATE']" -->
          <el-button type="primary" @click="OpenAddTitle()">新增</el-button>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="list_box">
      <el-table v-loading="loading" height="100%" :data="list" row-key="id" stripe border>
        <el-table-column type="index" :index="handleIndexCalc" label="#" align="center" />
        <el-table-column prop="label" label="字典标题" width="140" align="center" />
        <el-table-column prop="value" label="字典标题值" align="center" width="240" />
        <el-table-column prop="id" label="字典ID值" align="center" width="80" />
        <el-table-column
          prop="remark"
          :show-overflow-tooltip="true"
          label="备注"
          align="left"
        />
        <el-table-column
          label="分组标识" 
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.group">
              {{ scope.row.group }}
            </div>
            <div v-else>- - - -</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button-group>
              <!-- icon="el-icon-edit" -->
              <el-button
                class="edit_list_btn list_btn"
                v-permission="['PRIV_POWERS_UPDATE']"
                type="info"
                size="mini"
                @click="EditTitle(scope.row)"
                >编辑</el-button
              >
              <!--  icon="el-icon-delete" -->
              <el-button
                class="del_list_btn list_btn"
                v-permission="['PRIV_POWERS_DELETE']"
                type="danger"
                size="mini"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <m-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="addData" :model="addData" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题名称" prop="label">
              <el-input
                v-model.trim="addData.label"
                maxlength="50"
                placeholder="请输入标题名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题值" prop="value">
              <el-input
                v-model.trim="addData.value"
                maxlength="50"
                placeholder="请输入标题值(value)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="子类型数据" prop="dataType">
              <el-select
                v-model="addData.dataType"
                filterable
                placeholder="请选择子类型数据"
                :disabled="title == '编辑字典标题'"
              >
                <el-option :label="'string'" :value="'string'" />
                <el-option :label="'int'" :value="'int'" />
                <el-option :label="'decimal'" :value="'decimal'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题排序" prop="sortIndex">
              <el-input
                v-model.trim="addData.sortIndex"
                maxlength="50"
                placeholder="请输入排序(0)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分组标识">
              <el-input
                v-model.trim="addData.group"
                maxlength="50"
                placeholder="请输入排序(0)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题备注" prop="remark">
              <el-input
                v-model.trim="addData.remark"
                type="textarea"
                :autosize="{ minRows: 2 }"
                show-word-limit
                maxlength="100"
                placeholder="请输入标题备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </m-dialog>
    <el-row :gutter="20" class="pagination_box">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchData.pageIndex"
        :limit.sync="searchData.pageSize"
        @pagination="GetList"
      />
    </el-row>
    <!-- <div class="h_five">
      <H5Box>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" :title="item.id" />
        </van-list>
      </H5Box>
    </div> -->
  </div>
</template>

<script type="javascript/text">
import {
  titleAdd,
  titleList,
  titleOne,
  editAdd,
  delTitle,
} from "@/api/system/title";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { Edit } from "vxe-table";
import H5Box from "../../../components/H5Box/H5Box.vue";
export default {
  components: { H5Box },
  data() {
    return {
      /**请求参数 */
      searchData: {

        label: "",
        // orderBy: "",
        pageIndex: 1,
        pageSize: 20,
      },
      /**总数 */
      total: 0,
      /**列表数据 */
      list: [],
      /**备份列表数据 */
      backupList: [],
      // 遮罩层
      loading: true,
      /**添加参数 */
      addData: {
        id: undefined,
        label: "",
        value: "",
        sortIndex: 0,
        remark: "",
        group: "",
        dataType:"string"
      },
      /**新增的对话框标题 */
      title: "",
      /**开关 */
      open: false,
      // 表单校验
      rules: {
        label: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        value: [{ required: true, message: "值不能为空", trigger: "blur" }],
        sortIndex: [
          { required: true, message: "排序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**获取字典标题数据 */
    async GetList() {
      let { data, statusCode } = await titleList(this.searchData);
      if (statusCode != 200) return;
      this.list = data.dataSource;
      this.backupList = JSON.parse(JSON.stringify(data.dataSource));
      console.log(data);
      this.total = data.totalCount;
      this.loading = false;
    },
    /**重置请求数据 */
    ReData() {
      this.searchData = {
        label: "",
        pageIndex: 1,
        pageSize: 20,
      };
      this.GetList();
    },
    /**新增字典标题 */
    OpenAddTitle() {
      this.title = "新增字典标题";
      this.addData = {
        label: "",
        value: "",
        sortIndex: 0,
        remark: "",
        group: "",
        id: undefined,
        dataType:"string"
      };
      this.open = true;
    },
    /**编辑字典标题 */
    async EditTitle(row) {
      this.title = "编辑字典标题";
      let { data, statusCode } = await titleOne(row.id);
      if (statusCode != 200) return;
      this.addData = data;
      this.open = true;
    },
    // 自动计算分页 Id
    handleIndexCalc(index) {
      return (
        (this.searchData.pageIndex - 1) * this.searchData.pageSize + index + 1
      );
    },
    /** 提交按钮 */
    SubmitForm() {
      this.$refs["addData"].validate(async (valid) => {
        if (valid) {
          if (this.addData.id != undefined) {
            let { statusCode } = await editAdd(this.addData);
            if (statusCode != 200) return;
          } else {
            let { statusCode } = await titleAdd(this.addData);
            if (statusCode != 200) return;
          }
          this.$message({
            message: "添加成功",
            type: "success",
            center: true,
          });
          this.open = false;
          this.GetList();
        }
      });
    },
    /**删除字典标题 */
    async handleDelete(row) {
      this.$confirm(
        `此操作将永久删除该标题（${row.label}）, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let { statusCode } = await delTitle(row.id);
          if (statusCode != 200) return;
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.GetList();
        })
        .catch(() => {
          this.GetList();
        });
    },
  },

  created() {
    this.GetList();
  },
  mounted() { },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
